import { createStyles } from 'antd-style';

export const useMyNFTSStyles = createStyles(({ css, token }) => ({
    cardsWrapper: css`
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
        gap: 24px;
        @media (max-width: ${token.screenMD}px) {
            justify-items: center;
        }
    `,
    barterTitle: {
        paddingInline: '16px',
        marginBlock: '16px',
        '@media (max-width: 800px)': {
            fontSize: '13px',
        },
    },
    card: {
        '&.ant-card': {
            width: '164px',
            height: '234px',
            borderRadius: '16px',
            fontFamily: 'Inter',
            fontWeight: 'bold',
        },
        '.ant-card-body': {
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '40px',
            padding: 0,
        },

        img: {
            height: '194px',
            objectFit: 'cover',
        },
    },
}));